<template>
  <div>
    <a-range-picker
      dropdownClassName="custom-range-picker"
      @change="onChange"
      @openChange="onOk"
      :value="datelist"
      show-time
      format="YYYY-MM-DD HH:mm:ss"
      style="position: relative"
      :disabled-date="disabled"
    >
      <template #renderExtraFooter>
        <div class="queryman">
          <a @click="handleClick(1)">昨天</a>
          <a @click="handleClick(2)">本月1日到现在</a>
          <a @click="handleClick(3)">本周一到现在</a>
          <a @click="handleClick(4)">最近一周</a>
          <a @click="handleClick(5)">最近一个月</a>
          <a @click="handleClick(6)">最近一年</a>
        </div>
      </template>
    </a-range-picker>
  </div>
</template>
<script lang="ts">
import { defineComponent, onMounted, onUnmounted, watch, onActivated } from 'vue';
import { ref } from 'vue';
import moment from 'moment';
export default defineComponent({
  props: {
    data: {
      type: Array,
      default: () => {
        return [];
      },
    },
    disabled: {
      type: null,
      default: () => {
        return '';
      },
    },
  },
  setup(props, context) {
    const onChange = (value, options) => {
      datelist.value = options;
    };
    const datelist = ref<Array<string>>([]);
    const onOk = value => {
      if (!value) {
        context.emit('setTime', datelist.value);
      }
    };
    const handleClick = value => {
      if (value == 1) {
        datelist.value = [
          moment().subtract(1, 'day').format('YYYY-MM-DD 00:00:00'),
          moment().subtract(1, 'day').format('YYYY-MM-DD 23:59:59'),
        ];
      } else if (value == 2) {
        datelist.value = [
          moment().startOf('month').format('YYYY-MM-DD HH:mm:ss'),
          moment().format('YYYY-MM-DD HH:mm:ss'),
        ];
      } else if (value == 3) {
        datelist.value = [
          moment().weekday(0).format('YYYY-MM-DD 00:00:00'),
          moment().format('YYYY-MM-DD HH:mm:ss'),
        ];
      } else if (value == 4) {
        datelist.value = [
          moment().subtract(7, 'days').format('YYYY-MM-DD 00:00:00'),
          moment().format('YYYY-MM-DD HH:mm:ss'),
        ];
      } else if (value == 5) {
        datelist.value = [
          moment().subtract(30, 'days').format('YYYY-MM-DD 00:00:00'),
          moment().format('YYYY-MM-DD HH:mm:ss'),
        ];
      } else {
        datelist.value = [
          moment().subtract(365, 'days').format('YYYY-MM-DD 00:00:00'),
          moment().format('YYYY-MM-DD HH:mm:ss'),
        ];
      }
    };

    watch(
      () => props.data,
      () => {
        datelist.value = props.data as string[];
      },
      {
        deep: true,
      },
    );
    onMounted(() => {});
    onUnmounted(() => {});
    onActivated(() => {
      //   datelist.value = [];
    });
    return { onChange, onOk, handleClick, datelist };
  },
});
</script>
<style lang="less">
.queryman {
  position: absolute;
  top: -282px;
}
.queryman > a {
  display: block;
  color: #ffffff;

  cursor: pointer;
}
.queryman > a:hover {
  text-decoration: underline;
}
.custom-range-picker {
  .ant-calendar-date-panel {
    width: 412px;
    margin-left: 133px;
  }
}
</style>
